<template>
  <div style="margin-top: 5px; background-color:white; ">
    <el-row class="bottom-space">
      <el-col :span="16">
        <el-button :style="{ display: editEnable }" size="small" type="success" @click="newStandardTerm">新建标准术语
        </el-button>
        <el-button :style="{ display: editEnable }" plain size="small" type="primary" @click="showTermLibVersion">
          术语库版本
        </el-button>
      </el-col>
      <el-col :span="8">
        <div>
          <div style="width: 430px; float: right">
            <el-input v-model="name" placeholder="请输入术语名称" size="small" @keyup.enter.native="searchEnterFun($event)">
              <i class="el-input__icon el-icon-search" slot="prefix"></i>
            </el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table highlight-current-row :data="tableData" border style="width: 100%;" :height="tableHeight">
          <el-table-column label="术语名称" min-width="180" prop="name">
            <template slot-scope="scope">
              <span v-html="scope.row.name"></span>
            </template>
          </el-table-column>
          <el-table-column label="目录分类" min-width="160" prop="xmlClassify"></el-table-column>
          <el-table-column label="术语分类" min-width="160" prop="classify"></el-table-column>
          <el-table-column label="英文" min-width="180" prop="englishName">
            <template slot-scope="scope">
              <span v-html="scope.row.englishName"></span>
            </template>
          </el-table-column>
          <el-table-column label="英文简称" min-width="180" prop="englishAbbr">
            <template slot-scope="scope">
              <span v-html="scope.row.englishAbbr"></span>
            </template>
          </el-table-column>
          <el-table-column label="中文同义词" min-width="180" prop="synonym">
            <template slot-scope="scope">
              <span v-html="UTIL.arrayToStr(scope.row.synonym, 'value', ';')"></span>
            </template>
          </el-table-column>
          <el-table-column label="英文同义词" min-width="180" prop="englishNameSynonym">
            <template slot-scope="scope">
              <span v-html="scope.row.englishNameSynonym"></span>
            </template>
          </el-table-column>
          <el-table-column label="版本号" min-width="130" prop="version">
            <template slot-scope="scope">
              <span>{{ scope.row.version }}</span>
              <el-link @click="showASpecificVersionOfTheTerm(scope.row.id)" type="text" size="small"
                       style="color: #2DB7A0">历史版本
              </el-link>
            </template>
          </el-table-column>
          <el-table-column :formatter="dateFormat" label="更新时间" min-width="160"
                           prop="updatedTime"></el-table-column>
          <el-table-column fixed="right" label="操作" min-width="180">
            <template slot-scope="scope">
              <el-link @click="detailStandardById(scope.row.id)" size="small" type="text">查看</el-link>
              <el-link :style="{ display: editEnable }" size="small" @click="editById(scope.row.id)">编辑</el-link>
              <el-link :style="{ display: editEnable }" size="small" type="danger" @click="del(scope.row.id)">删除
              </el-link>

            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-pagination :page-size="pageSize" :total="totalNum" @current-change="handleCurrentChange" background
                     layout="total, prev, pager, next, jumper" style="text-align: right;margin-top: 10px"
                     v-if="multiplePages"></el-pagination>
    </el-row>
    <el-drawer v-if="dialogVisible" :fullscreen="true" :size="CONST.WORKSPACE_WIDTH + 'px'" :visible="dialogVisible"
               title="历史版本"
               @close="dialogVisible = false">
      <TermHistory :id="displayingTermId"></TermHistory>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false" size="small">关 闭</el-button>
      </span>
    </el-drawer>
    <el-drawer v-if="detailDialog" :size="CONST.WORKSPACE_WIDTH + 'px'"
               :visible="detailDialog"
               title="详情"
               @close="detailDialog = false">
      <DetailStandard :id="id"></DetailStandard>
    </el-drawer>
  </div>
</template>

<script>
import TermHistory from "./history/TermHistory";
import moment from "moment";
import DetailStandard from "./DetailStandard";

export default {
  name: 'StandardTerm',
  components: {DetailStandard, TermHistory},
  data() {
    return {
      multiplePages: true,
      noData: true,
      totalNum: 0,
      currentPage: 0,
      pageSize: 10,
      tableData: [],
      tableHeight: '',
      englishName: '',
      name: '',
      displayingTermId: "",
      dialogVisible: false,
      englishAbbr: '',
      synonym: '',
      englishNameSynonym: '',
      id: '',
      detailDialog: false,
      editEnable: ''
    }
  },
  methods: {
    newStandardTerm() {
      this.$router.push("/standardTermEdit")
    },
    getTable: function () {
      this.axios.get("/pmph/action/term/selectStandardList", {
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          name: this.name,
          synonym: this.synonym,
          englishName: this.englishName,
          englishAbbr: this.englishAbbr,
          englishNameSynonym: this.englishNameSynonym,
        }
      }).then((res) => {
        this.noData = res.data.totalNum <= 0;
        this.tableData = res.data.tableData;
        this.totalNum = res.data.totalNum;
      }).catch((err) => {
        console.error(err);
        this.tableData = [];
        this.noData = true;
        this.$message.error("未能请求到数据");
      })
    },
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.getTable();
    },
    editById(id) {
      this.$router.push({
        path: '/standardTermEdit',
        query: {
          id: id
        }
      })
    },
    del(id) {
      this.$confirm('是否删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get('/pmph/action/term/deleteById', {
          params: {
            id: id,
          }
        }).then((response) => {
            this.getTable();
        });
      })
    },
    detailStandardById: function (id) {
      this.id = id;
      this.detailDialog = true;
    },
    searchEnterFun(e) {
      const keyCode = window.event ? e.keyCode : e.which;
      if (keyCode === 13) {
        this.getTable();
      }
    },
    showASpecificVersionOfTheTerm(termId) {
      this.displayingTermId = termId
      this.dialogVisible = true
    },
    showTermLibVersion() {
      this.$router.push("/term/lib/history")
    },
    dateFormat: function (row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD  HH:mm:ss")
    },
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 95;
    this.getTable();

    if (this.$store.state.user.userName === 'admin') {
      return
    }
    //角色Id等于管理员角色
    for (let i = 0; i < this.$store.state.user.roleIds.length; i++) {
      if (this.$store.state.user.roleIds[i] === '1455781731549327361') {
        return;
      }
    }
    UTIL.findTreeNode(this.$store.state.menuList, item => {
      if (item.id === this.$store.state.activeId) {
        if (item.editButton && item.detailButton) {
          this.editEnable = ''
        } else {
          if (item.editButton) {
            this.editEnable = ''
          } else {
            this.editEnable = 'none'
          }

        }
      }
    })

  }
}
</script>

<style scoped>
.bottom-space {
  margin-bottom: 10px;
}
</style>
